<template>
  <!-- 主容器，支持暗黑模式 -->
  <view class="container" :class="{ dark: isDark }">
    <!-- 状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 功能入口区域 -->
    <view class="features slide-up">
      <!-- 路径规划功能入口 -->
      <view class="feature-item" @click="goToPath">
        <view class="feature-icon">🗺️</view>
        <view class="feature-info">
          <text class="feature-name">路径规划</text>
          <text class="feature-desc">设置小车行驶路线</text>
        </view>
        <text class="feature-arrow">></text>
      </view>
      
      <!-- 传感器数据功能入口 -->
      <view class="feature-item" @click="goToSensors">
        <view class="feature-icon">📊</view>
        <view class="feature-info">
          <text class="feature-name">传感器数据</text>
          <text class="feature-desc">查看各传感器实时数据</text>
        </view>
        <text class="feature-arrow">></text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  // 组件数据定义
  data() {
    return {
      batteryLevel: 85,       // 电池电量百分比
      loadingText: '加载中...', // 加载提示文本
      isLoading: false,       // 是否正在加载
      updateTimer: null,      // 数据更新定时器
      isDark: false           // 是否启用暗黑模式
    }
  },
  
  // 页面显示生命周期钩子
  onShow() {
    // 从全局获取暗黑模式设置
    const dark = getApp().globalData.darkMode;
    this.isDark = dark;
    
    // 根据暗黑模式设置界面样式
    if (dark) {
      // 暗黑模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#1e1e1e',
        borderStyle: 'black',
        color: '#999999',
        selectedColor: '#ffffff'
      });
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      // 明亮模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        color: '#7A7E83',
        selectedColor: '#fb7e29'
      });
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
  },
  
  // 页面加载生命周期钩子
  onLoad() {
    this.startDataUpdate(); // 启动数据更新
  },
  
  // 页面卸载生命周期钩子
  onUnload() {
    // 清除定时器
    if (this.updateTimer) {
      clearInterval(this.updateTimer);
    }
  },
  
  // 方法定义
  methods: {
    /**
     * 跳转到路径规划页面
     */
    goToPath() {
      uni.navigateTo({
        url: '/pages/path/path'
      });
    },
    
    /**
     * 跳转到传感器数据页面
     */
    goToSensors() {
      uni.navigateTo({
        url: '/pages/sensors/sensors'
      });
    },
    
    /**
     * 显示提示信息
     * @param {string} title - 提示标题
     * @param {string} icon - 图标类型
     */
    showToast(title, icon) {
      icon = icon || 'none'; // 默认无图标
      uni.showToast({
        title: title,
        icon: icon,
        duration: 2000 // 显示时长2秒
      });
    },
    
    /**
     * 显示加载状态
     * @param {string} text - 加载提示文本
     */
    showLoading(text) {
      text = text || '加载中...'; // 默认加载文本
      this.loadingText = text;
      this.isLoading = true;
    },
    
    /**
     * 隐藏加载状态
     */
    hideLoading() {
      this.isLoading = false;
    },
    
    /**
     * 启动数据更新定时器
     */
    startDataUpdate() {
      var that = this;
      // 每30秒更新一次电池电量数据
      this.updateTimer = setInterval(function() {
        that.batteryLevel = Math.floor(Math.random() * 10) + 80; // 模拟电量变化(80-90)
      }, 30000);
    }
  }
}
</script>
<style>
  /* 主容器样式 */
  .container {
    background: linear-gradient(135deg, #f7f7f7 0%, #e8e8e8 100%);
    min-height: 100vh;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); /* 底部安全区域适配 */
    color: #333;
    box-sizing: border-box;
  }
  
  /* 状态栏样式 */
  .status-bar {
    height: 44px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    position: relative;
    overflow: hidden;
  }
  
  /* 功能入口区域样式 */
  .features {
    margin: 32rpx;
  }
  
  /* 功能入口项样式 */
  .feature-item {
    display: flex;
    align-items: center;
    padding: 40rpx;
    background: white;
    border-radius: 40rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.04);
    position: relative;
    transition: all 0.3s ease; /* 平滑过渡效果 */
  }
  
  /* 最后一项去除底部边距 */
  .feature-item:last-child {
    border-bottom: none;
  }
  
  /* 功能项左侧高亮效果 */
  .feature-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    transition: width 0.3s ease;
  }
  
  /* 点击效果 */
  .feature-item:active::before {
    width: 8rpx;
  }
  
  .feature-item:active {
    background: rgba(255, 107, 53, 0.02);
    transform: translateX(8rpx);
  }
  
  /* 功能图标样式 */
  .feature-icon {
    width: 96rpx;
    height: 96rpx;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 32rpx;
    font-size: 40rpx;
    transition: all 0.3s ease;
  }
  
  /* 功能信息区域样式 */
  .feature-info {
    flex: 1;
  }
  
  /* 功能名称样式 */
  .feature-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
  }
  
  /* 功能描述样式 */
  .feature-desc {
    font-size: 24rpx;
    color: #666;
    display: block;
  }
  
  /* 右侧箭头样式 */
  .feature-arrow {
    color: #ccc;
    font-size: 28rpx;
    transition: all 0.3s ease;
  }
  
  /* 点击时箭头效果 */
  .feature-item:active .feature-arrow {
    color: #ff6b35;
    transform: translateX(8rpx);
  }
  
  /* 暗黑模式样式覆盖 */
  .dark {
    background: #121212;
    color: #ccc;
  }
  
  .dark .status-bar {
    background: linear-gradient(135deg, #444 0%, #222 100%);
  }
  
  .dark .feature-item {
    background: #1e1e1e;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.7);
    border: none;
  }
  
  .dark .feature-item::before {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  }
  
  .dark .feature-item:active {
    background: rgba(255, 107, 53, 0.1);
  }
  
  .dark .feature-icon {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
  }
  
  .dark .feature-name {
    color: #fff;
  }
  
  .dark .feature-desc {
    color: #bbb;
  }
  
  .dark .feature-arrow {
    color: #bbb;
  }
</style>